{% extends "mall/base.html" %} {% block title %} 分享-莱支好酒 {% endblock %} {%
block css %}
<style>
  select,
  input,
  button,
  textarea,
  option {
    font: 12px "Arial", "Microsoft Yahei";
  }

  img {
    border: 0;
  }

  li {
    list-style: none;
  }

  a:link,
  a:visited {
    text-decoration: none;
  }

  a:hover {
    text-decoration: none;
  }

  body {
    width: 100%;
    margin: 0;
    padding: 0;
    font: 14px "Arial", "Microsoft Yahei";
    height: auto;
    background-color: #f3f3f3;
    text-align: center;
    color: #888;
  }

  .head {
    text-align: center;
    height: 63px;
    background-color: #f8f8f8;
    width: 100%;
    color: #666;
    border-bottom: 1px solid #dcdcdc;
    font-size: 36px;
    line-height: 63px;
  }

  .head img {
    display: inline-block;
    margin-top: 8px;
  }

  .head b {
    display: inline-block;
    font-size: 26px;
    line-height: 63px;
    vertical-align: top;
  }

  .main-top {
    display: inline-block;
    text-align: center;
    width: 100%;
     {
      #padding: 0 10px;
      #;
    }
    margin: 20px 0;
    line-height: 1.6em;
  }

  .main {
    text-align: center;
    width: 100%;
  }

  .mainewm a {
    color: #888;
  }

  .appewmmain img {
    width: 118px;
    height: 118px;
  }

  .footmain b {
    font-size: 15px;
    padding-bottom: 10px;
    display: block;
  }

  .footmain p {
    padding-bottom: 5px;
  }

  .footmain img {
    position: absolute;
    right: 10px;
    top: 0;
    width: 22px;
  }

  #qr-code {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    text-align: center;
  }
  .tips {
    width: 80%;
    position: absolute;
    left: 10%;
    top: 20px;
    font-size: 20px;
    color: rgba(36, 36, 36, 1);
    text-align: center;
  }
  .tips-allow {
    position: absolute;
    width: calc(112.5px * 0.5);
    height: calc(26.5px * 0.5);
    position: absolute;
    right: 0;
    top: -10px;
  }
  .share {
    width: 90%;
    max-width: 750px;
    position: absolute;
    left: 50%;
    top: 54.5%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
</style>
{% endblock %} {% block header %} {% endblock %} {% block content %}
<input type="hidden" name="owner_open_id" value="{{ owner_open_id }}" />
<input type="hidden" name="open_id" value="{{ open_id }}" />
<div class="tips">
  <div>长按图片发送给朋友或点</div>
  <div>分享到朋友圈</div>
  <img class="tips-allow" src="/static/img/allow.png" />
</div>
<div class="share">
  <img id="share-img" style="width: 80%" alt="分享图片：加载中，请稍候 ..." />
</div>
<div class="main" style="display: none;">
  <div class="main-top">{{ description }}</div>
  <div id="qr-code"></div>
  <p style="text-align: center;font-size: 20px;" id="msg">用微信扫码打开</p>
</div>
<br />
<br />
{% endblock %} {% block footer %} {% endblock %} {% block js %}
<script src="{{ STATIC_URL }}/static/lib/jquery.qrcode.js"></script>
<script>
  var URL = {
    logo_src: "{{ STATIC_URL }}/static/img/icon.png"
  };
</script>
<script src="{{ STATIC_URL }}/static/js/mall/share.js?v={{ version_code }}"></script>
{% if is_wechat %}
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
  // 取用户二维码图片显示
  $.get("/api/user/qrcode", function(res) {
    console.log(
      "res.code= " +
        res.code +
        "msg: " +
        res.msg +
        "content: " +
        res.data.content
    );
    if (res.code == 0) {
      $("#share-img").attr("src", res.data.content);
    } else {
      alert(res.msg + "这个图片的二维码是莱支好酒公众号的二维码");
      $("#share-img").attr("src", "/static/img/content/shared.png");
    }
    var debug = false;
    var appId = "{{ app_id }}";
    // 时间戳
    var timeStamp = "{{ time_stamp }}";
    // 随机字符串
    var nonceStr = "{{ nonce_str }}";
    var signature = "{{ signature }}";
    var link =
      "https://" +
      location.host +
      "/share?oid=" +
      $("input[name=open_id]").val();
    console.log(link);
    wx.config({
      debug: debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: appId, // 必填，公众号的唯一标识
      timestamp: timeStamp, // 必填，生成签名的时间戳
      nonceStr: nonceStr, // 必填，生成签名的随机串
      signature: signature, // 必填，签名，见附录1
      jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
    wx.ready(function() {
      wx.onMenuShareTimeline({
        title: "也许你之前喝的只是假口感的真红酒", // 分享标题
        link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl:
          "https://wx.style999.com/static/img/logo.png?v={{ version_code }}", // 分享图标
        success: function() {
          // 用户确认分享后执行的回调函数
        },
        cancel: function() {
          // 用户取消分享后执行的回调函数
        }
      });
      wx.onMenuShareAppMessage({
        title: "也许你之前喝的只是假口感的真红酒", // 分享标题
        desc:
          "无论再好的红酒，在30°环境下超过18小时，它的色、香、味、口感都会造成不可逆转的致命性伤害。", // 分享描述
        link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl:
          "https://wx.style999.com/static/img/logo.png?v={{ version_code }}", // 分享图标
        type: "link", // 分享类型,music、video或link，不填默认为link
        dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
        success: function() {
          // 用户确认分享后执行的回调函数
        },
        cancel: function() {
          // 用户取消分享后执行的回调函数
        }
      });
    });
    wx.error(function(res) {
      alert("调用错误");
      alert(JSON.stringify(res));
    });

    function showDebug(k, v) {
      // 显示调试信息
      var html = "<p>";
      html += k + ":" + v;
      html += "</p>";
      $("#debug").append(html);
    }

    if (debug) {
      showDebug("appid", appId);
      showDebug("timeStamp", timeStamp);
      showDebug("nonceStr", nonceStr);
      showDebug("signature", signature);
    }
  });
</script>
{% endif %} {% endblock %}
